import { Card, Calendar, Popover, ConfigProvider } from 'antd'
import React, {useEffect, useState} from 'react'
import './WorkCalendar.less'
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment'
import {getDoToEvent} from "@/pages/Workplace/service";

const WorkCalendar = ({ loading }) => {

  const [upcomingList,setUpcomingList] = useState([]);
  const [date, setDate] = useState('');

  useEffect(()=>{
    getDoToEvent(date).then(res => {
      setUpcomingList(res?res:[]);
    })
  },[date]);

  const dateCellRender = (value) => {
    let calendarDate = moment(value).format('YYYY-MM-DD');
    const contentList = upcomingList.filter((item) => moment(item.data.todoDate).format('YYYY-MM-DD') === calendarDate);
    if (contentList.length > 0){
      return (
        <Popover content={() => setContent(contentList)} title="待办事项">
          {
            contentList.findIndex(item => item.data.isDone === 0) !== -1 ? <div className='tip-flag' ></div>:''
          }
        </Popover>
      );
    }
  };

  const setContent = (contentList) =>{
    return (
      <div>
        {
          contentList.map((item, index) => {
            if(item.data.isDone === 0){
              return <p key={index}>{item.data.title}</p>
            }
          })
        }
      </div>
    )
  };

  return (
    <ConfigProvider locale={zh_CN}>
    <Card loading={loading} bordered={false} title='工作日历' className='work-calendar'>
      <Calendar
        onPanelChange={(monthDate,) =>{setDate(monthDate.format('YYYY-MM'))}}
        dateCellRender={(value) => dateCellRender(value)}
        fullscreen={false}
      />
    </Card>
    </ConfigProvider>
  )
};

export default WorkCalendar
